<template>
  <bm-overlay :class="{ sample: true }" pane="labelPane" @draw="draw">
    <div>
      <p>{{item.label}}</p>
      <p>{{item.count}}套</p>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  props: ['index', 'item'],
  methods: {
    draw ({ el, BMap, map }) {
      const { latitude, longitude } = this.item.coord
      const pixel = map.pointToOverlayPixel(new BMap.Point(longitude, latitude))
      el.style.left = pixel.x - 35 + 'px'
      el.style.top = pixel.y - 35 + 'px'
    }
    // setValue () {
    //   this.$emit('change', this.item.coord, this.item.value)
    // }
  }
}
</script>

<style>
.sample {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  line-height: 1;
  font-size: 14px;
  background: RGB(35, 187, 120) !important;
  color: #fff;
  border: #fff 1px solid;
  text-align: center;
  position: absolute;
}
</style>
